<template>
  <div class="table-container">
    <Operation class="operation-container" @deleteUsers="deleteUsers" />

    <div class="alert-info-container">
      <a-alert show-icon>
        <template slot="message">
          <span style="margin-right: 12px">
            已选择: <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> 人
          </span>
          <a @click.prevent="selectChangeReset">清空</a>
        </template>
      </a-alert>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="pagination.items"
      :loading="tableLoading"
      size="middle"
      :scroll="{ x: 800 }"
      :pagination="paginationProps"
      row-key="id"
    >
      <template #username="text, row">
        <a @click.prevent="handlerDetails(row)">{{ text }}</a>
      </template>
      <template #action="text, row">
        <div class="actions-container">
          <a @click.prevent="handlerModify(row)" v-auth="'modify_group'">编辑</a>
          <a @click.prevent="handlerActive(row)" v-auth="'modify_group'">{{ row.active ? '停用' : '恢复' }}</a>
          <a @click.prevent="handlerDelete(row)" v-auth="'delete_group'">删除</a>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import { getUsers, deleteUsers, changeActive } from '@/api/flow/user'
import Operation from './Operation.vue'
import table from '@/utils/mixins/search/table'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`,
    ellipsis: true,
  },
  {
    title: '账号',
    dataIndex: 'username',
    scopedSlots: { customRender: 'username' },
    ellipsis: true,
  },
  {
    title: '职位',
    dataIndex: 'position_name',
    customRender: (text, record, index) => (text || '/'),
    ellipsis: true,
  },
  {
    title: '部门',
    dataIndex: 'department_name',
    customRender: (text, record, index) => (text || '/'),
    ellipsis: true,
  },
  {
    title: '角色',
    dataIndex: 'role',
    customRender: (text, record, index) => (text.toString() || '/'),
    ellipsis: true,
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    customRender: (text, record, index) => (text || '/'),
    ellipsis: true,
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    customRender: (text, record, index) => (text || '/'),
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  mixins: [table],

  components: {
    Operation,
  },

  data () {
    return {
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    }
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },

    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },
  },

  methods: {
    async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getUsers, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    // 删除用户
    async deleteUsersRequest (users) {
      try {
        await deleteUsers(users)

        await this.refreshTableData()

         this.$notification.success({
          message: '删除成功!',
          duration: 1,
        })
      } catch (error) {
        console.log(error)
      }
    },

    // 详情
    handlerDetails ({ id: uid }) {
      this.$router.push({
        name: 'AccountDetails',
        params: {
          uid,
        },
      })
    },

    // 编辑
    handlerModify ({ id: uid }) {
      this.$router.push({
        name: 'AccountEdit',
        params: {
          uid,
        },
      })
    },

    // 改变用户状态
    async handlerActive (row) {
      try {
        await changeActive(row.id)

        this.tableHooksRequest()
      } catch (error) {

      }
    },

    // 删除当前用户
    handlerDelete (row) {
      this.deleteUsersRequest([row.id])
    },

    // 删除用户
    async deleteUsers () {
      const users = this.selectedRowKeys
      if (!users.length) return

      this.deleteUsersRequest(users)
    },

    // SelectChange
    selectChangeReset () {
      this.$nextTick(() => {
        this.selectedRowKeys = []
      })
    },

    // select change
    onSelectChange (selectedRowKeys, row) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>

<style lang="scss" scoped>
.table-container {
  .operation-container {
    margin: $margin-sm 0;
  }

  .alert-info-container {
    margin-bottom: $margin-xs;
  }

  .actions-container {
    a {
      margin-left: $margin-base;
    }
  }
}
</style>
